<template>
  <div class="catalogImportPanle">
    <zyInfoPanel title="面单上传" :showUnfoldButton="false" class="catalogImport">
      <div class="stepArea">
        <div class="stepItem">
          <div class="stepText">1.点击【面单上传模板下载】，下载</div>
          <div class="stepContent">
            <zy-button text-button type="primary" @click="downloadTemplate">下载模板</zy-button>
          </div>
        </div>
        <div class="arrow">
          <img src="@/assets/arrow.png" alt="">
        </div>
        <div class="stepItem">
          <div class="stepText">2.点击【选取文件】，选择已填写完成的面单批量导入文件。</div>
          <div class="stepContent">
            <el-upload class="upload-demo uploading_list " ref="upload"
                       action="https://jsonplaceholder.typicode.com/posts/"
                       :before-remove="beforeRemove"
                       :file-list="fileList"
                       :on-change="changeFile"
                       :multiple="false"
                       :limit="1"
                       accept=".xls,.xlsx"
                       :auto-upload="false">
              <zy-button text-button type="primary">选取文件</zy-button>
            </el-upload>
          </div>
        </div>
        <div class="arrow">
          <img src="@/assets/arrow.png" alt="">
        </div>
        <div class="stepItem">
          <div class="stepText">3.点击【上传文件】把选择的文件上传的目</div>
          <div class="stepContent">
            <div class="btnArea">
              <zy-button text-button type="primary" @click="submitFile" class="btn">上传文件</zy-button>
              <zy-button text-button :disabled="disabled" class="btn">下载</zy-button>
            </div>
            <div class="tip">{{tipText}}</div>
          </div>
        </div>
      </div>
      <div class="tipArea">
        <div class="tipItem">注意：必须上传压缩文件或图片，文件大小不超过500M，</div>
      </div>
    </zyInfoPanel>
    <tablePanel tableName="CCatalogImportTable" :tableLoading="loading" tableTitle="上传记录" :tableList="tableList"
                :tableData="tableData" :total="total" :currentPage="page_start" :pageSize="page_size"
                @sizeChange="sizeChange" @pageChange="pageChange">
    </tablePanel>
  </div>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		name: "CCatalogImport",
		props: {},
		data() {
			return {
				disabled: true,
				tipText: '',
				fileList: [],
				loading: false,
				tableList: [
					{
						title: '上传人',
						name: 'company_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '上传时间',
						name: 'logistics_no',
						isShow: true,
						isSelected: true
					},
					{
						title: '目录名',
						name: 'logistics_type_desc',
						isShow: true,
						isSelected: true
					},
				],
				tableData: [],
				total: 0,
				page_start: 1,
				page_size: 10
      };
		},
		computed: {
			...mapGetters(['getToken'])
    },
		watch: {},
		components: {},
		methods: {
			beforeRemove() {
				this.fileList = [];
			},
			changeFile(file) {
				this.fileList[0] = file.raw || {};
			},
			submitFile(){
				var formData = new FormData();
				formData.append("token", this.getToken);
				formData.append("file", this.fileList[0]);
				this.$axios.post(this.$api.c_uploadLogistic, {
					file: this.fileList[0],
					token: this.getToken,
					isFile: true
				}).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg);
					} else {
						this.tipText = res.msg;
						this.disabled = false;
					}
				})
			},
			downloadTemplate(){
				this.$import_excal(this.$config.serverURL + 'template/收件信息模板.xlsx')
			},
			sizeChange(val) {
				this.page_size = val;
				this.getData()
			},
			pageChange(val) {
				this.page_start = val;
				this.getData()
			},
			getData(){

      }
    },
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/cooperate/catalog/catalogImport/index.less">

</style>
